<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="css/index.css">
    <script src="js/vue.js"></script>
    <script src="js/elementui.js"></script>
    <script src="js/axios.js"></script>
    <script src="js/common.js"></script>
    <title>用户维护</title>
</head>
<body>
    <div id="app">
        <el-table :data="tableData" border style="width: 100%">
            <el-table-column prop="uname" label="用户名" width="180">
            </el-table-column>
            <el-table-column label="密码" width="180">
                <template slot-scope="scope">
                    ******
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot="header" slot-scope="scope">
                    <el-button size="mini" type="primary" @click="add">增加</el-button>
                </template>
                <template slot-scope="scope">
                    <el-button size="mini" @click="upuser(scope.$index, scope.row)">编辑</el-button>
                    <el-button type="warning" size="mini" @click="upuserrole(scope.$index, scope.row)">用户角色</el-button>
                </template>
            </el-table-column>
        </el-table>
        <el-drawer title="用户角色维护" :visible.sync="drawer" :with-header="true">
            &nbsp;
            当前用户拥有的角色{{nowuserid}}<br>
            <template v-for="item in userRoleList">
                &nbsp;
                <el-button @click="deleteUserRole(item.id)" style="margin-bottom: 5px;"  size="small" type="primary" plain>{{item.description}}<i class="el-icon-minus"></i></el-button>
            </template>
        <hr>
        <template v-for="item in roleList">
            &nbsp;
            <el-button @click="addUserRole(item.id)" style="margin-bottom: 5px;" size="medium" type="danger">{{item.description}}<i class="el-icon-plus"></i></el-button>
        </template>
            <!-- {{userRoleList}} -->
        </el-drawer>
    </div>
</body>
<script>
    new Vue({
        el: "#app",
        data: {
            tableData:[],
            drawer:false,//控制用户角色维护的抽屉
            nowuserid:0,//当前要修改的用户id
            userRoleList:[],//当前用户拥有的角色
            roleList:[],//所有的角色集合
        
        },
        methods: {
            initTableData() {
                let that = this
                axios.get(API + "boot/selectUser").then(function (res) {
                    that.tableData = res.data.data.userList
                }).catch(err => {
                    console.log(err)
                });
            },add(){
                let that = this
                axios.post(API + "boot/insert", {
                    uname: that.form.uname,
                    upwd: that.form.upwd
                }).then(function (res) {
                    console.log(res)
                    if (res.data.code == 200) {
                        that.$message({
                            message:'添加成功',
                        })
                    }
                })
            },upuser(i,row){//修改用户角色
               
            },upuserrole(i,row){
                this.nowuserid=row.id//设置用户id为当前行点击的用户id
                let that = this
                axios.get(API + "boot/selectRoleByUserId/"+this.nowuserid).then(function (res) {
                    that.userRoleList = res.data.data.roleList
                }).catch(err => {
                    console.log(err)
                });

                this.drawer=true;//打开抽屉
            },
            addUserRole(roleid){//根据用户id和角色id添加用户角色关联的角色
                let that = this
                axios.post(API + "boot/addRoleid",{
                    "userid":this.nowuserid,
                    "roleid":roleid
                }).then(function (res) {
                    that.drawer = false;
                    that.userRoleList.push(res.data.data.role)
                }).catch(err => {})
            },
            allRole(){
                let that = this
                axios.get(API + "boot/selectRole").then(function (res) {
                    that.roleList = res.data.data.rolelist
                }).catch(err => {
                    console.log(err)
                });
            },deleteUserRole(roleid){//根据用户id和角色id删除用户角色关联的角色
                let that = this
                axios.post(API + "boot/deleteByUseridAndRoleid",{
                    "userid":this.nowuserid,
                    "roleid":roleid
                }).then(function (res) {
                    that.userRoleList=that.userRoleList.filter(function(obj){
                    return obj.id!==roleid
                })
                }).catch(err => {
                    console.log(err)
                });
                // alert(this.nowuserid+"==="+roleid)
            }
        },mounted() {
          this.initTableData();
          this.allRole();
        }
    })
</script>
</html>